<!-- subpkg_consult/room/components/rate-info.vue -->
<script lang="ts" setup>
import { evaluateDoctorAPI } from '@/apis/room'
import { computed, ref } from 'vue'
 // 接收组件外部的数据
 const props = defineProps({
    orderId: String,
    doctorId: String,
     // 是否已评价过
     hasEvaluate: {
      type: Boolean,
      default: false,
    },
    // 评价的内容
    evaluateDoc: {
      type: Object,
      default: {},
    },
  })

// 评价内容
const formData = ref({
  score: props.evaluateDoc.score,
  content: props.evaluateDoc.content,
  anonymousFlag: 0,
})
// 是否已经评价过
const hasEvaluate = ref(props.hasEvaluate)
// 统计字数
const wordCount = computed(() => {
  // 通过 ? 来避免初始数据中 content 不存在的情况
  return formData.value.content?.length || 0
})
// 是否允许提交
const buttonEnable = computed(() => {
  return formData.value.score
})
// 是否匿名提交
function onAnonymousClick() {
  formData.value.anonymousFlag = Math.abs(formData.value.anonymousFlag - 1)
}
 

  // 提交表单
  async function onFormSubmit() {
    // 调用接口
    await evaluateDoctorAPI({
      docId: props.doctorId,
      orderId: props.orderId,
      ...formData.value,
    })
    uni.showToast({title:'感谢您的评价！'})
    // 标记已经评价过
    hasEvaluate.value = true
  }
</script>
<template>
  <!-- 医生评价 -->
  <view class="doctor-rating">
    <view class="title">医生服务评价</view>
    <view class="subtitle">本次在线问诊服务您还满意吗？</view>
    <view class="rating">
      <uni-rate v-model="formData.score" :size="28" margin="12" :value="0" />
    </view>
    <view class="text">
      <uni-easyinput
        v-model="formData.content"
        :maxlength="150"
        type="textarea"
        :input-border="false"
        placeholder-style="font-size: 28rpx; color: #979797"
        placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
      />
      <text class="word-count">{{wordCount}}/150</text>
    </view>
    <view 
    @click="onAnonymousClick"
    v-if="!hasEvaluate" 
    class="anonymous">
      <uni-icons 
      v-if="formData.anonymousFlag" 
      size="16" 
      color="#16C2A3" type="checkbox-filled" />
      <uni-icons 
      v-else 
      size="16" 
      color="#d1d1d1" 
      type="circle" 
      />
      <text class="label">匿名评价</text>
    </view>
    <button 
    v-if="!hasEvaluate"
    :disabled="!buttonEnable" 
    @click="onFormSubmit"
    class="uni-button"
    >提交</button>
  </view>
</template>

<style lang="scss">
.doctor-rating {
  padding: 30rpx 30rpx 40rpx;
  border-radius: 20rpx;
  background-color: #fff;
  margin-top: 60rpx;

  .title {
    text-align: center;
    font-size: 30rpx;
    color: #121826;
  }

  .subtitle {
    text-align: center;
    font-size: 24rpx;
    color: #6f6f6f;
    margin: 10rpx 0 20rpx;
  }

  .rating {
    display: flex;
    justify-content: center;
  }

  .text {
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    background-color: #f6f6f6;
    border-radius: 20rpx;
    position: relative;
  }

  :deep(.uni-easyinput__content-textarea) {
    font-size: 28rpx;
  }

  .word-count {
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    line-height: 1;
    font-size: 24rpx;
    color: #6f6f6f;
  }

  .anonymous {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30rpx 0;
    color: #6f6f6f;
    font-size: 24rpx;

    .label {
      margin-left: 6rpx;
    }
  }

  .uni-button[disabled] {
    color: #a6dbd5;
    background-color: #eaf8f6;
  }
}
</style>
